<!-- 主体html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YanWuPlayer</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<!-- 引入axios库 -->
<script src ="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
    <div id="musicPlayer">
        <!-- 顶部 -->
        <div id="topPart">
            <div id="title">网抑云音乐 <!--修改标题-->
                <!-- <img id="imglogo" src="img/pig.png" alt=""> -->
                <input type="text" placeholder="search for music"
                v-model="keywords" @keyup.enter="searchMusic"> <!--搜索框-->
                <img id="imgSearch" src="img/search.png" alt="" >
            </div>
        </div>
        <!-- 中间部分 -->
        <div id="middlePart">
            <div id="musicList">
                <div id="musicListSon">
                    <div id="musicItem" v-for="item in songsList">
                        <img id="imgPlay" src="img/play.png" alt="播放音乐" 
                        @click="playMusic(item.id)">
                        <div id="songTitle">{{ item.name }}</div>
                        <img id="imgMvPlay" src="img/MVplay.png" v-show="item.mvid!=0" @click="playMV(item.mvid)" alt="播放mv">
                    </div>
                    <div><p id="message">--到达底部啦--</p></div>
                </div>
            </div>
            <div id="playAnimation">
                <img id="imgDisk" src="img/disk.png" alt="唱片图片">
                <!-- 歌曲封面 -->
                <img id="imgCover" :src="coverUrl" alt="歌曲封面">
            </div>
            <div id="musicComment">
                <div id="musicCommentSon">
                    <div id="commentList" v-for="(item,index) in hotCommentList">
                        <div id="headPortrait" >
                            <img id="imgHeadPortrait" :src="item.user.avatarUrl" alt="用户头像">
                        </div>
                        <div id="commentBox" >
                            <div ><p id="nickName">{{ item.user.nickname }}</p></div>
                            <div ><p id="comment">{{ item.content }}</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部播放器 -->
        <div id="mediaPlayer">
            <!-- v-bind属性，缩写是冒号。 -->
            <audio :src="songUrl" controls="controls" autoplay="autoplay" loop="loop"
            @play="play" @pause="play"></audio>
        </div>
        <!-- 视频播放器 -->
        <div class="videoBox" v-show="isShow">
            <video :src="mvUrl" controls="controls"></video>
            <div id="mask" class="test" @click="disappear"></div>
        </div>
    </div>
    <script>
        /*
            请求地址：https://autumnfish.cn/search
            请求方法：get
            请求参数：keywords(查询的关键字)
            响应内容：歌曲的搜索结果
        */
        var musicPlayer = new Vue({
            el:"#musicPlayer",
            data() {
                return {
                    keywords:"",
                    songsList:[],
                    songSrc:"",
                    songUrl:"",
                    coverUrl:"img/diskDefault.jpg",
                    hotCommentList:[],
                    // 音频状态
                    isPlaying:false,
                    // 遮罩层的显示状态
                    isShow:false,
                    mvUrl:"",
                }
            },
            methods: {
                /*
                    搜索歌曲使用的接口是：https://autumnfish.cn/search
                    请求参数：keywords(搜索的歌曲名字)
                */
                searchMusic:function(){
                    // console.log(this.keywords);
                    var that = this;
                    axios.get("https://autumnfish.cn/search?keywords="+this.keywords)
                    .then(function(response){
                        that.songsList = response.data.result.songs;
                    }).catch(function(err){
                        // console.log(err);
                    })
                },

                /*
                    播放歌曲，使用的接口是：https://autumnfish.cn/song/url
                    请求参数：id(歌曲id)
                */
                playMusic:function(songId){
                    var that = this;
                    // console.log(songId);
                    axios.get("https://autumnfish.cn/song/url?id="+songId)
                    .then(function(response){
                        that.songUrl = response.data.data[0].url
                        // console.log(that.songUrl);
                    }).catch(function(err){
                    });

                    /*
                        获取封面：使用的接口是：https://autumnfish.cn/song/detail
                        请求参数：ids(歌曲id)
                    */
                    axios.get("https://autumnfish.cn/song/detail?ids="+songId)
                    .then(function(response){
                        that.coverUrl = response.data.songs[0].al.picUrl;
                    }).catch(function(err){
                        // console.log(err);
                    });
                    /*
                        请求地址：https://autumnfish.cn/comment/hot?type=0
                        请求方法：get
                        请求参数：id(歌曲id，type固定为0)
                    */
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+songId)
                    .then(function(response){
                        that.hotCommentList = response.data.hotComments;
                    }).catch(function(err){
                        console.log(err);
                    })
                },

                /*
                    请求地址：https://autumnfish.cn/mv/url
                    请求方法：get
                    请求参数：id(mvid,为0说明没有mv)
                    响应内容：mv的地址
                */
                playMV:function(mvId){
                    var that = this;
                    axios.get("https://autumnfish.cn/mv/url?id="+mvId)
                    .then(function(response){
                        that.mvUrl = response.data.data.url;
                        that.isShow = true;
                        // 播放mv时，音频关闭
                        that.isPlaying = false;
                        // console.log(that.mvUrl);
                        }).catch(function(err){
                            console.log(err)
                    })
                },
                play:function(){
                    this.isPlaying = true;
                },
                pause:function(){
                    this.isPlaying = false;
                },
                disappear:function(){
                    this.isShow = false;
                }
            },
        })
    </script>
</body>
</html>